<template>
  <div>
    <div class="vux-demo">
      <img class="logo" src="../../assets/vux_logo.png">
    </div>
    <form v-on:submit.prevent>
      <group class="login">
        <verify-code :model="model" :smsType="smsType"></verify-code>
        <x-input type="password" placeholder="输入密码(6位以上)" v-model="model.password"></x-input>
      </group>
      <div class="submit">
        <x-button @click.native="onRegister">注册</x-button>
      </div>
    </form>
  </div>
</template>

<script>
  import {Group, Cell, XInput, XButton} from 'vux';
  import VerifyCode from './VerifyCode'
  import {mapActions, mapState} from 'vuex';
  import * as types from '../../store/types'
  import * as constants from '../../AppConstants'
  import utils from '../../commons/utils'
  export default {
    components: {
      Group,
      Cell,
      XInput,
      XButton,
      VerifyCode,
    },
    data() {
      return {
        model: {
          username: '',
          verifyCode: '',
          password: ''
        },
        smsType: constants.SMS_VERIFY_CODE_USER_REGISTER,
        authUserInfo: {}
      };
    },
    methods: {
      ...mapActions([
        'register',
        'showTip',
      ]),
      onRegister(){
        if (!this.model.username) {
          this.showTip('请输入手机号');
        } else if (!utils.checkPhone(this.model.username)) {
          this.showTip('手机号格式不正确');
        } else if (!this.model.verifyCode) {
          this.showTip('请输入验证码');
        } else if (!this.model.password) {
          this.showTip('请输入密码');
        } else if (this.model.password.length < 6) {
          this.showTip('密码不能少于6位');
        } else {
          this.register(this.model).then(userInfo => {
            this.$router.replace('/login')
          }).catch(err => {
            console.log(err)
          })
        }
      },
      onLogin(){
        this.$router.replace('/login')
      }
    },
    created() {
      let header = Object.assign({}, this.$store.getters.header, {
        title: '注册',
        isRightTxt: true,
        rightTxt: '登录',
        rightEvent: this.onLogin
      })
      this.$store.commit(types.UPDATE_HEADER, header)
    }
  };
</script>

<style>
  .vux-demo {
    text-align: center;
  }

  .logo {
    width: 100px;
    height: 100px
  }

  .login {
    width: 94%;
    margin: 0 auto;
    border-radius: 6px;
    overflow: hidden;
  }

  .submit {
    color: #179de9;
    background-color: #fff;
    width: 94%;
    margin: 10px auto;
    display: block;
    height: 40px;
    border-radius: 6px;
    font-size: 14px;
  }
</style>
